<template>
  <div class="maincontent rri">
    <el-tabs class="resultIdea" v-model="activeName">
      <el-tab-pane label="基本信息"  name="first">
        <el-form class="earlyMappingForm" :inline="true" ref="surveyBaseForm" label-position="left" :model="surveyBaseData" label-width="80px">
          <div class="maintitle">前期测绘基本信息</div>
          <div class="basicInfo">
            <span v-if="surveyBaseData.enterpriseBaseDTO">测绘单位: {{surveyBaseData.enterpriseBaseDTO.name}}</span>
            <div>
              <span>红线范围内总面积: {{surveyBaseData.totalAreaInRedline}}公顷</span>
              <span>可实施总规模: {{surveyBaseData.totalAreaForced}}公顷</span>
              <span>可开发规模: {{surveyBaseData.totalAreaDevelop}}公顷</span>
              <span>可整理规模: {{surveyBaseData.totalAreaOrganized}}公顷</span>
              <span>可复垦规模: {{surveyBaseData.totalAreaReclaim}}公顷</span>

            </div>
            <div>
              <span>1:10000土地利用现状图图幅号: {{surveyBaseData.drawingNumber}}</span>
            </div>
            <div><span class="block"></span></div>
          </div>
        </el-form>
        <el-form class="earlyMappingForm" :inline="true" ref="formData" label-position="left" :model="form" :rules="formRule" label-width="80px">
          <div class="maintitle">内业审查</div>
          <div class="formAllRow">
            <el-form-item label="图件审查" prop="drawingAudit">
              <el-input style="width:774px;" readonly v-model="form.drawingAudit" :rows="3" type="textarea" ></el-input>
            </el-form-item>
            <div>
              <el-form-item label="数据及报告审查" label-width="130px" prop="dataReportAudit">
                <el-input style="width:774px;" readonly :rows="3" type="textarea" v-model="form.dataReportAudit"></el-input>
              </el-form-item>
            </div>
          </div>

          <div class="maintitle">外业审查</div>
          <div class="formAllRow">
            <div>
              <el-form-item label="其他草地审查" label-width="100px" pro="otherGrassAudit">
                <el-input style="width:774px;" readonly :rows="3" type="textarea" v-model="form.otherGrassAudit"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="疑问审查" prop="questionAudit">
                <el-input style="width:774px;" readonly :rows="3" type="textarea" v-model="form.questionAudit"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <el-form :inline="true" class="earlyMappingForm" :model="examineOpinion" :rules="opinionFormRule" ref="opinionForm">
          <div class="maintitle">市中心复审意见</div>
          <template v-for="item in beforeOpinions">
            <div class="formAllRow">
              <div>
                <el-form-item :label="item.institutions" label-width="150px" prop="opinion">
                  <el-input style="width:774px;" :rows="3" type="textarea" readonly v-model="item.advice"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formcontent">
              <div>
                <el-form-item label="审查人" label-width="60px" >
                  <el-image style="width: 120px; height: 60px" :src="`${item.people}`"></el-image>
                </el-form-item>
                <el-form-item label="审查日期" label-width="110px" v-if="item.date">
                  <el-date-picker readonly v-model="item.date" type="datetime" style="width:200px">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="审查意见" label-width="110px">
                  <el-select v-model="item.status" disabled style="width:200px">
                    <el-option label="同意" :value="0"></el-option>
                    <el-option label="不同意" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </template>
          <div class="formcontent">
            <div>
              <el-form-item label="审查人" label-width="60px" >
                <el-image style="width: 120px; height: 60px" :src="signPhoto.img"></el-image>
              </el-form-item>
              <el-form-item label="审查日期" label-width="110px"  prop="createTime">
                <el-date-picker v-model="examineOpinion.createTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" style="width:200px;" :readonly="isCurrentProcess">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见" label-width="110px" prop="status">
                <el-select v-model="examineOpinion.status" :disabled="isCurrentProcess" style="width:200px">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="不同意" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div style="margin-top:110px;">
            <el-form-item>
              <el-button type="primary" @click="onSubmit" v-if="!isCurrentProcess">提交</el-button>
              <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="审查流程" name="second">
        <div class="processContainer">
          <process :processData="processData1"></process>
        </div>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
    import process from "../public/process";
    import { examineOpinionList, addReviewOpinion } from '@/api/plannDesign/application'
    import { getInfo } from '@/api/user'
    import { getSurveyData, getDataAdvice, saveExamineOpinion } from '@/api/earlyMapping/mapResultReviewOpinion'
    import config from '@/config/'
    import moment from 'moment'
    export default {
        components:{
            process:process
        },
        data() {
            return {
                historyData: {
                    // planningDesignFile: {
                    //     fileName: ''
                    // }
                },
                companyList: [], // 企业列表
                fileList: [],
                planningDesignFile: {},
                projectId: localStorage.getItem('projectId') * 1,
                activeName:"first",
                examineOpinion: {
                    groupId: 6, // 审查分组
                    type: 1, // 审查机构类型
                    opinion: "",
                    signature: "",
                    status: 0,
                    createTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                },
                surveyBaseData: {
                    drawingNumber: '',
                    companyId: '',
                    totalAreaInRedline: '',
                    totalAreaForced: '',
                    totalAreaDevelop: '',
                    totalAreaOrganized: '',
                    totalAreaReclaim: ''
                },
                form: {

                    drawingAudit: '',
                    dataReportAudit: '',
                    otherGrassAudit: '',
                    questionAudit: ''

                },
                beforeOpinions: [],
                processData: '', // 流程信息
                processData1:{
                  groupId: 6, // 审查分组
                  projectId:localStorage.getItem('projectId') * 1,
                },
                userInfo: JSON.parse(localStorage.getItem('SET_LOGIN_INFO')), // 获取用户信息
                opinionFormRule: {
                    opinion: [{require: true,
                        validator: (rule, value, callback) => {
                            if(value.length < 1 || value.length > 200) {
                                callback(new Error("请输入意见"))
                            }
                            callback()
                        }, trigger: 'blur'}],
                    createTime: [{require: true,
                        validator: (rule, value, callback) => {
                            if(value.length < 1 || value.length > 200) {
                                callback(new Error("请选择时间"))
                            }
                            callback()
                        }, trigger: 'blur'}]
                },
                formRule: {
                    drawingAudit: [{require: true, validator: (rule, value, callback) => this._validate(rule, value, callback, '请填写图件审查内容'), trigger: 'blur'}],
                    dataReportAudit: [{require: true, validator: (rule, value, callback) => this._validate(rule, value, callback, '请填写数据及报告审查内容'), trigger: 'blur'}],
                    otherGrassAudit: [{require: true, validator: (rule, value, callback) => this._validate(rule, value, callback, '请填写其他草地审查内容'), trigger: 'blur'}],
                    questionAudit: [{require: true, validator: (rule, value, callback) => this._validate(rule, value, callback, '请填写疑问审查内容'), trigger: 'blur'}],
                },
                signPhoto:{
                  img:""
                }
            };
        },

        created() {
            this._initData()
        },
        
        computed:{
          isCurrentProcess:function () {
            let isTrue = localStorage.getItem('key') == 'PRE_PROJECTING_CITY_CENTER_1';
            return !isTrue
          }
        },

        methods: {
            onSubmit(){                
                let isTrue = false

                this.$refs['opinionForm'].validate(valid => {
                    isTrue = Boolean(valid)
                })

                if(isTrue ) {
                    const loading = this.$loading({
                        lock: true,
                        text: "Loading",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.7)"
                    })
                    const data = Object.assign(this.examineOpinion, {projectId: this.projectId, signature: this.userInfo.signedPhoto})
                    addReviewOpinion(data).then(res => {
                        loading.close()
                        this.$message.success("操作成功")
                        this.$router.push('/projectManagement/planningStage/dealwith');
                    }).catch(err => {
                        loading.close()
                    })
                }
            },
            _validate(rule, value, callback, msg) {
                if(value == '') {
                    callback(new Error(msg))
                }
                callback()
            },
            // 获取历史数据
            _getHistoryData () {
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                })
                // 公司列表
                let params = {
                    page: 1,
                    size: 9999,
                };
                getDataAdvice(this.projectId).then(res => {
                    this.form = res.data
                })
                getSurveyData(this.projectId).then(res => {
                    this.surveyBaseData = res.data;
                    loading.close()
                }).catch(err => {
                    loading.close()
                })


            },
            // 审查流程/审查意见数据获取
            _getProcessList () {
                this.processData = ["经办人审查意见", "处室负责人审查意见"];
                const opinionType = this.examineOpinion.type;
                examineOpinionList({groupId: this.examineOpinion.groupId, projectId: this.projectId}).then(res => {
                    if(res.data.length > 0) { // 审核意见
                        const inx = res.data.findIndex( item => {
                            return item.type == opinionType
                        })
                        if(inx !== -1) {
                            this.examineOpinion = res.data [inx];
                            this.signPhoto['img'] = config.baseUrlImg + res.data[inx].signature;
                        }else{
                          this.signPhoto['img'] = config.baseUrlImg + this.userInfo.signedPhoto;
                        }
                    }
                    // 流程数据获取
                    let processList = this.processData.slice()
                    for (let i=0; i < processList.length; i++) {
                        let temp = { // 审查流程初始化
                            isReview: false,
                            institutions: processList[i],
                            status: 0
                        }
                        if (res.data[i]) { // 判断是否存在已走流程
                            const item = res.data[i]
                            temp['isReview'] = true
                            temp['groupId'] = item.groupId
                            temp['type'] = item.type
                            temp['status'] = item.status
                            temp['people'] = `${config.baseUrlImg}${item.signature}`
                            temp['date'] = item.createTime
                            temp['advice'] = item.opinion
                        }
                        processList[i] = temp
                    }
                    this.processData = processList
                    this.beforeOpinions = processList.slice(0, opinionType)
                })
            },
            _initData() {
                this._getHistoryData()
                this._getProcessList()
            }
        },
        filters: {
            handleImgPrefix (url, config) {
                return `${config.baseUrlImg}${url}`
            }
        }
    }
</script>
<style lang="scss" scoped>
  .rri {
    .resultIdea {
      /deep/ .el-tabs__content {
        overflow: unset;
      }

      /deep/ .el-tabs__header {
        background: #fff;
        height: 46px;
        padding: 0 20px;

        /deep/ .el-tabs__item {
          height: 36px;
          line-height: 36px;
          margin-top: 10px;
          padding: 0 10px;
        }

        /deep/ .el-tabs__nav-wrap::after {
          width: 0;
        }
      }

      .earlyMappingForm {
        /deep/ .el-form-item__label {
          color: #8C8C8C;
          text-align: right;
        }
        /deep/ .el-input__suffix {
          i{
            font-style: normal;
          }
        }
      }

      .formAllRow {
        /deep/ .el-form-item__content /deep/ .el-textarea /deep/ .el-textarea__inner {
          width: 1170px;
          max-width: calc(100vw - 320px - 60px);
        }

        /deep/ .el-form-item__label {
          display: block;
          text-align: left;
          margin-top: 15px;
        }

        /deep/ .el-form-item {
          width: 100%;
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  .processContainer {
    background: #fff;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    height: calc(100vh - 120px);
  }
  .maincontent{
    height: calc(100vh - 114px);
    padding: 30px;
    overflow: auto;
    background: #F5F6F7;
    .earlyMappingForm {
      background: #fff;
      padding: 20px;
    }
    .maintitle{
      font-size:18px;
      font-family:PingFang SC;
      font-weight:bold;
      line-height:25px;
      color: #4d4d4d;
      margin-top: 60px;
      margin-bottom: 30px;
      &:first-child {
        margin-top: 0;
      }
    }
    .basicInfo {
      span{
        display: inline-block;
        margin:20px 60px 0 0;
        font-size: 14px;
        color: #8C8C8C;
      }
    }
    .formcontent{
      margin-top: 30px;
    }
    .secondtitle{
      font-size:14px;
      font-family:PingFang SC;
      font-weight:500;
      line-height:20px;
      margin-right:20px;
      line-height:38px;
    }
  }
</style>

